import React, { useEffect, useRef } from "react"
import { useNavigate } from "react-router-dom"
import { gsap } from "gsap"
import { ScrollTrigger } from "gsap/ScrollTrigger"
import { SelectedPage } from "../../shared/types"
import zswImage from "../../assets/image/zsw.jpeg"

// 注册ScrollTrigger插件
gsap.registerPlugin(ScrollTrigger)

type Props = {
  setSelectedPage: (value: SelectedPage) => void
}

const EventManageSection: React.FC<Props> = ({ setSelectedPage }) => {
  const navigate = useNavigate()
  const sectionRef = useRef<HTMLElement>(null)
  const leftImageRef = useRef<HTMLDivElement>(null)
  const rightContentRef = useRef<HTMLDivElement>(null)

  useEffect(() => {
    const ctx = gsap.context(() => {
      // 设置初始状态
      gsap.set([leftImageRef.current, rightContentRef.current], {
        opacity: 0,
        y: 50
      })

      // 创建时间线
      const tl = gsap.timeline({
        scrollTrigger: {
          trigger: sectionRef.current,
          start: "top 80%",
          end: "bottom 20%",
          onEnter: () => setSelectedPage(SelectedPage.EventManage),
          once: true
        }
      })

      // 添加动画序列
      tl.to(leftImageRef.current, {
        opacity: 1,
        y: 0,
        duration: 0.6,
        ease: "power2.out"
      })
      .to(rightContentRef.current, {
        opacity: 1,
        y: 0,
        duration: 0.6,
        ease: "power2.out"
      }, "-=0.3")

    }, sectionRef)

    return () => ctx.revert()
  }, [setSelectedPage])

  return (
    <section ref={sectionRef} id="eventManage" className="w-full min-h-screen bg-white py-20 px-4">
      <div className="max-w-7xl mx-auto">
        {/* 标题区域 */}
        <div className="text-center mb-16">
          <h2 className="text-4xl font-bold text-primary-500 mb-4">精彩赛事活动</h2>
          <p className="text-lg text-gray-600 max-w-3xl mx-auto">
            广东海洋大学体育馆定期举办各类体育赛事和活动，为师生提供展示才华、交流技艺的平台。
          </p>
        </div>

        {/* 主要内容区域 */}
        <div className="flex flex-col lg:flex-row items-center gap-12">
          {/* 左侧图片 */}
          <div ref={leftImageRef} className="lg:w-1/2">
            <div className="relative">
              <img 
                src={zswImage} 
                alt="体育赛事活动" 
                className="w-full h-[500px] object-contain rounded-lg shadow-2xl bg-white"
              />
              <div className="absolute inset-0 bg-gradient-to-t from-black/10 to-transparent rounded-lg"></div>
            </div>
          </div>

          {/* 右侧内容区域 */}
          <div ref={rightContentRef} className="lg:w-1/2">
            <div className="space-y-8">
              {/* 主标题 */}
              <div>
                <h3 className="text-3xl font-bold text-primary-500 mb-4">
                  百万师生参与
                  <span className="text-primary-400"> 精彩赛事</span>
                </h3>
                <div className="w-16 h-1 bg-primary-300 rounded-full mb-6"></div>
              </div>

              {/* 描述文字 */}
              <div className="space-y-4 text-gray-600 leading-relaxed">
                <p>
                  广东海洋大学体育馆致力于为全校师生提供丰富多彩的体育赛事和活动。
                  我们定期举办篮球、足球、羽毛球、乒乓球等各类体育比赛，
                  为热爱运动的师生们搭建展示才华、交流技艺的舞台。
                </p>
                <p>
                  无论您是体育爱好者还是专业运动员，都能在这里找到属于自己的精彩时刻。
                  参与我们的赛事活动，体验运动的激情与快乐！
                </p>
              </div>

              {/* 特色亮点 */}
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div className="flex items-center space-x-3">
                  <div className="w-8 h-8 bg-primary-100 rounded-full flex items-center justify-center">
                    <svg className="w-4 h-4 text-primary-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                  </div>
                  <span className="text-gray-700 font-medium">专业裁判团队</span>
                </div>
                <div className="flex items-center space-x-3">
                  <div className="w-8 h-8 bg-primary-100 rounded-full flex items-center justify-center">
                    <svg className="w-4 h-4 text-primary-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                  </div>
                  <span className="text-gray-700 font-medium">丰富奖品设置</span>
                </div>
                <div className="flex items-center space-x-3">
                  <div className="w-8 h-8 bg-primary-100 rounded-full flex items-center justify-center">
                    <svg className="w-4 h-4 text-primary-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
                    </svg>
                  </div>
                  <span className="text-gray-700 font-medium">团队协作精神</span>
                </div>
                <div className="flex items-center space-x-3">
                  <div className="w-8 h-8 bg-primary-100 rounded-full flex items-center justify-center">
                    <svg className="w-4 h-4 text-primary-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
                    </svg>
                  </div>
                  <span className="text-gray-700 font-medium">激情竞技氛围</span>
                </div>
              </div>

              {/* 行动按钮 */}
              <div className="pt-4">
                <button
                  className="bg-primary-500 text-white px-8 py-4 rounded-lg hover:bg-primary-600 font-semibold text-lg shadow-lg hover:shadow-xl cursor-pointer transform hover:-translate-y-1 transition-all duration-300"
                  onClick={() => navigate('/events')}
                >
                  立即报名参赛
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}

export default EventManageSection


